<template>
	<view>
		<view class="moments">
			<view class="moments__post" v-for="(item,index) in dataList" :key="index">
				<view class="post-left">
					<image class="post_header" mode="aspectFill" :src="item.user_head_img"></image>
				</view>
				<view class="post_right">
					<view class="post-username">
						{{item.user_name}}
					</view>
					<view class="paragraph">
						<!-- 利用v-if…v-else切换 展开 和 收起 两个画面，template包裹多个元素 -->
						<template v-if="item.isHide">
							<!-- 只显示摘要的画面 -->
							<div class="hideBg">
								<p class="summary">{{item.content}}</p>
								<div class="showBtn" @click="textToggle(index)">
									全文
								</div>
							</div>
						</template>
						<template v-else>
							<!-- 显示完整内容的画面 -->
							<div class="showBg">
								<p>{{item.content}}</p>
								<div class="hideBtn" @click="textToggle(index)">
									收起
								</div>
							</div>
						</template>
					</view>
					<!-- 相册 -->
					<view class="thumbnails">
						<view class="thumbnail" v-for="(image, index_images) in item.content_img" :key="index_images" @click="preview(index_images,item.content_img)">
							<image lazy-load="true" mode="aspectFill" :src="image"></image>
						</view>
					</view>
					<!-- 资料条 -->
					<view class="toolbar">
						<view class="timestamp">{{item.create_date}}</view>
						<view class="from">来自于班级圈</view>
					</view>
				</view>
				<!-- 结束 post -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: Array
		},
		data() {
			return {

			}
		},
		created() {
			//console.log(this.dataList)
		},
		methods: {
			textToggle(index) {
				this.dataList[index].isHide = !this.dataList[index].isHide;
			},
			preview(index, item) {
				uni.previewImage({
					current: item[index],
					urls: item // 需要预览的图片http链接列表
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.moments {
		padding: 0px;
		background: #fff;

		.moments__post {
			background: #fff;
			display: block;
			border-bottom: 1px solid #f2eeee;
			padding: 30upx 20upx;
			position: relative;
			display: flex;

			.post-left {
				width: 90upx !important;
				height: 90upx !important;
				border-radius: 10upx;
				// margin-top: 8upx;
				padding: 5px;

				image {
					width: 45px;
					height: 45px;
					border-radius: 2px;
				}
			}

			.paragraph {
				margin: 10px 0px 10px 0px;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #080102;

				/* 摘要内容 */
				.summary {
					overflow: hidden;
					/* 隐藏溢出内容 */
					text-overflow: clip;
					/* 修剪文本 */
					display: -webkit-box;
					/* 弹性布局 */
					-webkit-box-orient: vertical;
					/* 从上向下垂直排列子元素 */
					-webkit-line-clamp: 3;
					/* 限制文本仅显示前三行 */
				}

				/* 展开按钮 */
				.showBtn {
					width: 100%;
					/* 与背景宽度一致 */
					height: 1rem;
					z-index: 0;
					text-align: left;
					color: #757ED1;
					/* 背景色半透明到白色的渐变层 */
					// background: linear-gradient(rgba(233, 236, 239, .5), white);
				}

				/* 收起按钮 */
				.hideBtn {
					width: 100%;
					/* 与背景宽度一致 */
					height: 1rem;
					z-index: 0;
					text-align: left;
					color: #757ED1;
					/* 背景色半透明到白色的渐变层 */
					// background: linear-gradient(rgba(233, 236, 239, .5), white);
					text-align: right;
				}
			}

			.post-username {
				height: 24px;
				line-height: 24px;
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #223662;
			}

			.thumbnails {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.thumbnail {
					width: 30%;
					height: 24vw;
					overflow: hidden;
					margin: 2px;
					border-radius: 5px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.target-label {
				font-size: 12px;
				font-weight: 400;
				color: #999999;
				margin-top: 31px;
			}

			.post_right {
				font-size: 32upx;
				display: table-cell;
				padding-left: 20upx;
				width: 100%;
			}

			.toolbar {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20px;

				.timestamp,
				.from {
					color: #757575;
					font-size: 24upx;
				}
			}

			.post-footer {
				margin-top: 20px;

				.footer_content {
					padding-left: 10upx;
					position: relative;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.nickname {
						color: #414F2F;
						font-size: 12px;
					}

					.comment-nickname {
						color: #414F2F;
						font-size: 12px;
					}

					.comment-content {
						color: #414F2F;
						font-size: 12px;
					}
				}
			}
		}

		.moments__post::before {
			content: none
		}
	}
</style>
